$primary-theme-color: #409EFF;
$success-theme-color: #67C23A;
$warning-theme-color: #E6A23C;
$danger-theme-color: #F56C6C;
$info-theme-color: #909399;

$themes: (primary, #409EFF),
        (success, #67C23A),
        (warning, #E6A23C),
        (danger, #F56C6C),
        (info, #909399);

@each $name, $color in $themes {
  .#{$name}-theme {
    .theme-bg {
      background-color: $color;
    }
    .theme-color {
      color: $color;
    }
  }
}

* {
  /* chrome < 121 */
  &::-webkit-scrollbar {
    width: 6px;
    height: 14px;
  }
  &::-webkit-scrollbar-button,
  &::-webkit-scrollbar-corner {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, 0.3);
    border-radius: 10px;
  }
}

@supports (-moz-appearance: none) {
  * {
    /* firefox */
    scrollbar-width: thin;
    scrollbar-color:rgba(144, 147, 153, 0.3) transparent;
  }
}

// fix unocss bug v0.58.9
.light-bg-white {
  background-color: white;
}

html.dark {
  --primary-color: #409EFF;
  --danger-color: #F56C6C;
  --text-color: #ffffff;
  --text-color-regular: #f9f9f9;
  --text-color-placeholder: #dfdfdf;
  --text-color-disabled: #b3adad;
  --border-color: #435d80;
  --border-color-light: #507ab0;
  --bg-color: 85, 144, 242;
  --bg-color-light: 4, 56, 141;
  // --bg-color-dark: rgb(18, 77, 173);
  // --bg-color-dark: 18, 77, 173;
  --bg-color-dark: 0, 42, 110;
  --border: 1px solid #435d80;
  --border-light: 1px solid #507ab0;

  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("@/assets/bg.blue.jpg");

  #app {
    color: var(--text-color-regular);
    background: transparent;
  }

  .el-table__fixed::before {
    display: none;
  }

  input,
  textarea {
    &::placeholder {
      color: var(--text-color-placeholder);
    }
  }

  #app,
  .logo,
  .el-tree,
  .el-table,
  .el-table tr,
  .bg-white,
  .content-block .info-content .lines-block,
  .content-block .info-content .pie-block,
  .el-date-editor .el-range-input,
  .el-input .el-input__count .el-input__count-inner,
  .el-textarea .el-input__count,
  .layout-head {
    background: transparent;
  }

  .org-tree-container,
  .input-number-editor,
  .el-textarea__inner,
  .menu-filter .el-input__inner,
  .el-select:hover .el-input__inner,
  .el-select .el-input .el-input__inner:hover,
  .el-input-number__increase,
  .el-input-number__decrease,
  .el-upload--picture-card,
  .el-input__inner {
    border-color: transparent;
    background-color:rgba(var(--bg-color), .4);
  }

  .el-radio-button__inner,
  .el-tree-node:focus>.el-tree-node__content,
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content,
  .el-tree-node__content:hover,
  .el-input-group__append, 
  .el-input-group__prepend,
  .el-select .el-input.is-disabled .el-input__inner:hover,
  .el-input.is-disabled .el-input__inner {
    border-color: transparent;
    background-color:rgba(var(--bg-color), .3);
  }

  .report-person .el-input__inner {
    background: rgb(var(--editable-color));
  }
  .report-person .invalid-input .el-input__inner {
    background: var(--danger-color);
  }

  .extra-fill .report-input:focus,
  .report-value .report-input {
    border-color: transparent;
  }

  .extra-fill .report-input[disabled],
  .is-readonly-table .report-value:not(.no-border-bottom),
  .report-person .el-input__inner[readonly] {
    border-color: transparent;
    background: transparent;
  }

  .contextmenu,
  .context-menu,
  .el-message-box,
  .amap-info-content,
  .el-dropdown-menu,
  .el-cascader__dropdown,
  .el-popover,
  .el-backtop,
  .el-picker-panel,
  .el-select-dropdown,
  .el-autocomplete-suggestion {
    background: rgba(var(--bg-color-light), 1);
    border: var(--border);
    box-shadow: 0 0 35px rgba(var(--bg-color), .35) inset;
    border-radius: 6px 8px;
  }

  .el-dialog,
  .overlay-page,
  .table-account-details {
    // background: rgba(var(--bg-color-light), 1);
    // background: rgba(var(--bg-color-dark), 1);
    background: rgb(16, 59, 134);
  }

  .table-account-details {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    border-radius: 6px 8px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
  }

  .dark-alpha-block,
  .el-card,
  .card-item,
  .dark-table-wrapper,
  .content-block,
  .grid-content .content-block,
  .content-with-tree .left-tree,
  .layout-aside {
    background: rgba(var(--bg-color), .14);
    border: var(--border);
    box-shadow: 0 0 35px rgba(var(--bg-color), .35) inset;
    border-radius: 6px 8px;
  }
  .el-popper[x-placement^=bottom] .popper__arrow::after,
  .el-popper[x-placement^=bottom] .popper__arrow {
    border-bottom-color:rgba(var(--bg-color-light), 1);
  }

  .el-table--border .el-table__cell {
    border-right: var(--border);
  }

  .dark-info-head-border,
  .el-table--border .el-table__cell,
  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: var(--border);
  }

  .el-table--border .el-table__fixed-body-wrapper .el-table__cell,
  .el-table--border th.el-table__cell {
    border-bottom: var(--border-light);
  }
  .el-table--border .el-table__fixed-body-wrapper .el-table__cell,
  .el-table--border th.el-table__cell {
    border-right: var(--border-light);
  }

  .el-table--group,
  .el-table--border,
  .chart-internal-table th,
  .chart-internal-table td {
    border: var(--border);
  }

  .divider,
  .el-table__fixed::before, 
  .el-table__fixed-right::before,
  .el-table::before, 
  .el-table--group::after, 
  .el-table--border::after {
    background-color: var(--border-color, #435d80);
  }

  .el-table__fixed-right::before,
  .el-table__fixed-left::before {
    display: none;
  }

  .contextmenu,
  .input-number-editor .icon,
  .el-message-box__title,
  .el-message-box__headerbtn .el-message-box__close,
  .el-message-box__content,
  .app-li,
  .el-textarea .el-input__count,
  .el-input .el-input__count,
  .el-month-table td .cell,
  .el-date-table th,
  .el-date-editor .el-range-input,
  .amap-info-window,
  .el-dropdown-menu__item,
  .el-cascader-node.is-selectable.in-active-path,
  .el-cascader__dropdown,
  .el-cascader-menu,
  .el-upload--picture-card i,
  .el-upload--picture-card,
  .el-input-number__increase,
  .el-input-number__decrease,
  .el-table,
  .el-dialog__title,
  .el-dialog__headerbtn .el-dialog__close,
  .el-dialog__body,
  .el-input__inner,
  .td-button,
  .el-tree,
  .el-card,
  .el-picker-panel,
  .el-textarea__inner,
  .el-year-table td .cell,
  .el-date-picker__header-label,
  .el-picker-panel__icon-btn,
  .el-select-dropdown__item,
  .el-pagination__total,
  .table-account-details,
  .el-tabs__item,
  .el-popover,
  .card-item-ul .label,
  .el-range-separator,
  .el-autocomplete-suggestion li {
    color: var(--text-color-regular);
  }

  .dark-text-color {
    color: var(--text-color-regular) !important;
  }

  .el-input-group__append,
  .el-input-group__prepend,
  .enterprise-panel .panel-head {
    color: var(--text-color-placeholder);
  }

  .el-radio-button__inner,
  .logo a,
  .logo .logo-icon {
    color: var(--text-color-regular);
  }
  
  .el-select .el-input__inner:focus {
    // color: var(--primary-color);
    color: var(--text-color);
  }

  .dark-input .el-input__inner,
  .fullscreen-operate-modal {
    background-color: rgba(var(--bg-color-dark), 1);
  }

  .el-button--default {
    background-color: #082a6c;
    border-color: #082a6c;
    color: var(--text-color-placeholder);
  }


  .fill-in-enterprise-indicators-table,
  .table-account-details {
    --stable-color: 12 46 105;
    --computed-color: 16 59 134;
    --editable-color: 24 91 225;
  }
  
  .fill-in-enterprise-indicators-table {
    background: rgb(var(--computed-color));
  }
  
  .report-table {
    --report-table-border-color: var(--border-color-light);
    --report-table-head-bg-color: rgb(var(--stable-color));
    --report-table-tr-bg-color: rgb(var(--stable-color));
    --report-table-editable-bg-color: rgb(var(--editable-color));

    .fake1::after {
      --report-table-head-bg-color: rgb(var(--stable-color));
    }

    .is-stable-cell {
      background: rgb(var(--stable-color));
    }
    .is-computed-cell {
      background: rgb(var(--computed-color));
    }
    .is-editable-cell {
      background: rgb(var(--editable-color));
    }

    .input-cell textarea,
    .input-cell input {
      color: var(--text-color-regular);
    }
    .input-cell:not(.is-readonly) textarea:focus, 
    .input-cell:not(.is-readonly) input:focus {
      outline: 2px solid var(--primary-color);
      transition: none;
    }
    .special-cell {
      border-color: var(--report-table-border-color) !important;
    }
  }
  .enterprise-basic-information-table {
    th {
      background: rgb(var(--stable-color));
    }
    .input-cell {
      background: rgb(var(--editable-color));
    }
  }

  .dark-report-table {
    border: var(--border);
  }
  .report-table td,
  .report-table th {
    border-color: var(--report-table-border-color);
  }
  .bg-white {
    background: transparent;
  }
  .report-input,
  .report-label {
    color: var(--text-color-regular);
  }
  .table-description {
    .el-textarea__inner {
      background: transparent;
    }
  }

  .el-month-table td.in-range div,
  .el-date-table td.in-range div,
  .el-dropdown-menu__item:not(.is-disabled):hover, 
  .el-dropdown-menu__item:focus,
  .el-cascader-node:not(.is-disabled):hover, 
  .el-cascader-node:not(.is-disabled):focus,
  .el-table__body tr.hover-row > td.el-table__cell, 
  .el-table__body tr.hover-row.current-row > td.el-table__cell, 
  .el-table__body tr.current-row > td.el-table__cell,
  .el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell, 
  .el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell,
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover,
  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: rgba(var(--bg-color), .3);
  }

  .el-menu--popup .el-menu-item {
    background-color: rgba(var(--bg-color-dark), 1) !important;
    color: var(--text-color-regular) !important;
  }
  .el-menu--popup .menu-title {
    color: var(--text-color-regular) !important;
  }
  .el-month-table td.disabled .cell,
  .el-year-table td.disabled .cell {
    color: var(--text-color-disabled);
  }

  .td-button:not(.del-btn) {
    background-color: rgba(var(--bg-color), 1);
  }

  .el-tabs__nav-wrap::after {
    --bg-color-dark: 8, 42, 110;
  }

  .el-month-table td.disabled .cell,
  .el-year-table td.disabled .cell,
  .el-tabs__nav-wrap::after {
    background-color: rgba(var(--bg-color-dark), 1);
  }

  .el-pagination.is-background .btn-prev, 
  .el-pagination.is-background .btn-next, 
  .el-pagination.is-background .el-pager li {
    color: var(--text-color-regular);
    // background-color: var(--border-color-light);
    background-color: rgba(var(--bg-color-dark), 1);
  }

  .el-pagination.is-background .el-pager li:not(.disabled):hover {
    background-color: rgba(var(--bg-color), 1);
    color: var(--text-color);
  }
  
  .el-pagination.is-background .btn-prev:disabled, 
  .el-pagination.is-background .btn-next:disabled {
    color: var(--text-color-placeholder);
    background-color: rgba(var(--bg-color-dark), 1);
  }

  .td-button.del-btn {
    color: var(--text-color-regular) !important;
    background-color: var(--danger-color);
  }

  .el-tooltip__popper.is-dark {
    background-color: rgba(var(--bg-color), 1) !important;
  }

  .el-tooltip__popper[x-placement^=bottom] .popper__arrow::after,
  .el-tooltip__popper[x-placement^=bottom] .popper__arrow {
    border-bottom-color: rgba(var(--bg-color), 1);
  }

  .el-tooltip__popper[x-placement^=left] .popper__arrow::after,
  .el-tooltip__popper[x-placement^=left] .popper__arrow {
    border-left-color: rgba(var(--bg-color), 1);
  }

  .el-tooltip__popper[x-placement^=right] .popper__arrow::after,
  .el-tooltip__popper[x-placement^=right] .popper__arrow {
    border-right-color: rgba(var(--bg-color), 1);
  }

  .el-tooltip__popper[x-placement^=top] .popper__arrow::after,
  .el-tooltip__popper[x-placement^=top] .popper__arrow {
    border-top-color: rgba(var(--bg-color), 1);
  }

  .el-popper[x-placement^=top] .popper__arrow::after,
  .el-popper[x-placement^=top] .popper__arrow {
    border-top-color: rgba(var(--bg-color-light), 1);
  }

  .el-popper[x-placement^=right] .popper__arrow::after,
  .el-popper[x-placement^=right] .popper__arrow {
    border-right-color: rgba(var(--bg-color-light), 1);
  }

  .el-popper[x-placement^=bottom] .popper__arrow::after,
  .el-popper[x-placement^=bottom] .popper__arrow {
    border-bottom-color: rgba(var(--bg-color-light), 1);
  }

  .el-popper[x-placement^=left] .popper__arrow::after,
  .el-popper[x-placement^=left] .popper__arrow {
    border-left-color: rgba(var(--bg-color-light), 1);
  }

  .bottom-center .amap-info-sharp {
    border-top-color: rgba(var(--bg-color-dark), 1);
  }

  .el-table--border th.el-table__cell.gutter:last-of-type {
    background-color: rgb(39,86,192);
    border-width: 0;
  }
  
  .el-autocomplete-suggestion li:hover {
    background-color: var(--primary-color);
  }

  .el-card__header,
  .td-button,
  .custom-dialog .el-dialog__header {
    border-color: var(--border-color-light);
  }

  .el-radio-button:first-child .el-radio-button__inner,
  .el-cascader:not(.is-disabled):hover .el-input__inner,
  .el-select .el-input__inner:focus,
  .el-select .el-input.is-focus .el-input__inner,
  .el-cascader .el-input .el-input__inner:focus {
    border-color: transparent;
  }

  .dark-table-wrapper {
    flex: 1;
    padding: 10px;
  }

  .el-table {
    .el-table__fixed {
      .el-table__fixed-body-wrapper {
        .el-table__row {
          background-color: rgba(var(--bg-color-dark), 1);
        }
      }
    }
    .el-table__fixed-right {
      .el-table__fixed-body-wrapper {
        .el-table__row {
          background-color: rgba(var(--bg-color-dark), 1);
        }
      }
    }
  }

  .el-radio,
  .el-checkbox,
  .el-form-item__label,
  .app-li:hover,
  .el-dialog__headerbtn:focus .el-dialog__close,
  .el-dialog__headerbtn:hover .el-dialog__close {
    color: var(--text-color);
  }

  .el-loading-mask,
  .v-modal {
    opacity: 1;
    background: rgba(var(--bg-color-dark), .2);
    backdrop-filter: blur(2px);
  }

  /* tag */
  .el-tag {
    background-color: #409EFF;
    border-color: #409EFF;
    color: #fff;
  }
  .el-tag.el-tag--success {
    background-color: #67c23a;
    border-color: #67c23a;
    color: #fff;
  }
  .el-tag.el-tag--warning {
    background-color: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
  }
  .el-tag.el-tag--danger {
    background-color: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
  }

  /* message */
  .el-message {
    background-color: mix(#409EFF, #000000);
    border-color: #409EFF;
    color: #fff;
  }
  .el-message--success {
    background-color: mix(#67c23a, #000000);
    border-color: #67C23A;
    color: #fff;
  }
  .el-message--warning {
    background-color: mix(#e6a23c, #000000);
    border-color: #E6A23C;
    color: #fff;
  }
  .el-message--error {
    background-color: mix(#f56c6c, #000000);
    border-color: #F56C6C;
    color: #fff;
  }

  .el-table__expand-icon,
  .el-message .el-icon-info,
  .el-message .el-icon-success,
  .el-message__content {
    color: var(--text-color-regular);
  }

  .dialog-info__label {
    color: var(--text-color-placeholder);
  }

  .overview-item,
  .el-table th.el-table__cell,
  .el-table__fixed-right-patch,
  .el-table thead.is-group th.el-table__cell {
    background-color:rgba(var(--bg-color-light), 1) !important;
  }

  .el-table__fixed-right-patch {
    border-bottom-color: rgba(var(--bg-color-light), 1);
  }

  .layout-aside .layout-menu .el-menu-item.is-active, 
  .layout-aside .layout-menu .el-submenu__title.is-active {
    background-color: rgba(255,255,255,0.2) !important;
  }
  .dark-text-white {
    color: var(--text-color-regular) !important;
  }
}